<template>
  <div class="container">
    <!-- <div class="tab flex">
      <span class="tab_info" :class="tabinfo == '1' ? 'cur': ''" data-info="1" @tap="changetab"><i>消息</i></span>
      <span class="tab_info" :class="tabinfo == '2' ? 'cur': ''" data-info="2" @tap="changetab"><i>通知</i></span>
      <span class="tab_info" :class="tabinfo == '3' ? 'cur': ''" data-info="3" @tap="changetab"><i>@我的</i></span>
      <span class="tab_info" :class="tabinfo == '4' ? 'cur': ''" data-info="4" @tap="changetab"><i>更多</i></span>
    </div> -->
    <div class="message_ul" v-show="tabinfo === '1'">
      <!-- <scroll-view :scroll-top="scrollTop" :scroll-y="true" :style="{height: scrollHeight +'px'}" class="list" @scrolltolower="bindDownLoad" @scrolltoupper="refresh"> -->
      <div class="message_li" v-for="item in orderlist" v-if="orderlist.length > 0" :key="item.userid">
        <div class="header flex">
          <span class="user_pic"><img :src="item.headurl || '/static/imgs/system_user.png'" alt=""></span>
          <div class="info flex-item">
            <span class="name">{{item.name}}</span>
            <span class="time">{{item.addtime}}</span>
          </div>
        </div>
        <div class="content">
          恭喜【{{item.shopname}}】的{{item.name}}今天出了第<span v-if="item.sex==0" style="color:#ea78aa">&nbsp;{{item.ordernum}}&nbsp;</span><span v-else style="color:#51c0f9">&nbsp;{{item.ordernum}}&nbsp;</span>单。 快来围观吧！#出单#
        </div>
        <div class="footer flex">
          <span class="flex-item icons xj"><i></i>{{item.xianjinyeji}}</span>
          <span class="flex-item icons kh"><i></i>{{item.kahaoyeji}}</span>
          <span class="flex-item icons dz"><i></i>🌹🌹🌹</span>
        </div>
      </div>
      <Loading v-if="showLoading"></Loading>
      <div v-if="nomsg" class="flex bottom" style="color:#ff4444;font-size:24rpx;">
        <span>{{loadTip}}</span>
      </div>
      <!-- </scroll-view> -->
    </div>
    <Empty :message="mes" v-if="tabinfo === '2' || tabinfo === '3' || tabinfo === '4'"></Empty>
  </div>
</template>

<script>
import wx from 'wx'
import api from '@/utils/api'
import moment from 'moment'
import Empty from '@/components/empty'
import Loading from '@/components/loading'
export default {
  data () {
    return {
      tabinfo: '1',
      list: [],
      scrollTop: 0,
      scrollHeight: 0,
      orderlist: [],
      loadmore: {
        page: 0,
        size: 10,
        lock: 0
      },
      mes: '功能即将开放，敬请期待！',
      isbottom: false,
      nomsg: false,
      loadTip: '',
      showLoading: false
    }
  },
  components: {
    Empty,
    Loading
  },
  async onLoad () {
    let that = this;
    wx.getSystemInfo({
      success: function (res) {
        console.info(res.windowHeight);
        that.scrollHeight = res.windowHeight - 53
      }
    });
    this.orderlist = []
    this.loadmore.page = 0
    this.loadmore.lock = 0
    this.isbottom = false
    // 请求数据
    await Promise.all([
      this.getsuccessReport()
    ])
  },
  methods: {
    async getsuccessReport () {
      this.showLoading = true
      this.loadmore.lock = 1;
      let orcode = wx.getStorageSync('userInfo').orcode;
      let ret = await api.getorcodeorderlist({ page: this.loadmore.page, size: this.loadmore.size, orcode: orcode });
      console.log(ret)
      if (ret) {
        if (ret.code === '100') {
          let that = this
          setTimeout(function () {
            if (that.loadmore.page === 0) { // 如果是首次加载
              ret.orderlist.forEach(item => {
                item.addtime = moment.unix(item.addtime).format('YYYY-MM-DD hh:mm')
                item.xianjinyeji = parseFloat(item.xianjinyeji.toFixed(2))
                item.kahaoyeji = parseFloat(item.kahaoyeji.toFixed(2))
              });
              console.log(ret.orderlist)
              that.showLoading = false
              that.orderlist = ret.orderlist;
            } else { // 如果不是首次加载
              that.showLoading = false
              for (let i = 0; i < ret.orderlist.length; i++) {
                ret.orderlist[i].addtime = moment.unix(ret.orderlist[i].addtime).format('YYYY-MM-DD hh:mm')
                ret.orderlist[i].xianjinyeji = parseFloat(ret.orderlist[i].xianjinyeji.toFixed(2))
                ret.orderlist[i].kahaoyeji = parseFloat(ret.orderlist[i].kahaoyeji.toFixed(2))
                that.orderlist.push(ret.orderlist[i]);
              }
            }
            // that.loadmore.page += 1;
            // that.loadmore.lock = 0;
            if (that.orderlist.length >= 3) {
              that.isbottom = true
            }
          }, 200);
        } else {
          console.log(111)
          if (this.loadmore.page === 0) {
            this.orderlist = '';
          }
          this.showLoading = false
          this.nomsg = true
          this.loadTip = '已经到底了！'
        }
      } else {
      }
    },
    changetab (e) {
      this.tabinfo = e.mp.currentTarget.dataset.info
      console.log(this.tabinfo)
    },
    bindDownLoad () {
      // var that = this;
      // GetList(that);
      this.getsuccessReport()
    },
    scroll (e) {
      this.scrollTop = e.mp.detail.scrollTop
    },
    refresh () {
      this.scrollTop = 0;
      this.loadmore.page = 0;
      this.getsuccessReport()
    }
  },
  async onPullDownRefresh () {
    this.loadmore.page = 0
    this.loadmore.lock = 0
    this.isbottom = false
    // 请求数据
    await Promise.all([
      this.getsuccessReport()
    ])
    wx.stopPullDownRefresh()
  },
  onReachBottom () {
    let that = this;
    if (that.isbottom) {
      this.nomsg = true
      this.loadTip = '正在加载中';
      that.loadmore.page += 1;
      that.loadmore.lock = 0;
      that.getsuccessReport()
    }
  },
  created () {
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
  }
}
</script>

<style scoped>
.container {
  position: relative;
  padding-top: 0rpx;
}
.tab {
  position: fixed;
  top: 20rpx;
  left: 0;
  width: 100%;
  height: 66rpx;
  line-height: 66rpx;
  background: #fff;
  font-size: 32rpx;
  color: rgba(102, 102, 102, 1);
  margin-bottom: 14rpx;
  z-index: 3;
}
.tab .tab_info {
  flex: 1;
  text-align: center;
}
.tab .tab_info.cur {
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.tab .tab_info.cur i {
  display: inline-block;
  position: relative;
}
.tab .tab_info.cur i::after {
  content: '';
  position: absolute;
  bottom: 8rpx;
  left: 0;
  width: 100%;
  height: 4rpx;
  background: RGBA(255, 68, 68, 1);
}
.message_ul {
}
.message_ul .message_li {
  position: relative;
  background: #fff;
  padding: 28rpx;
  margin-bottom: 18rpx;
  z-index: 1;
}
.message_ul .message_li .header {
  margin-bottom: 16rpx;
}
.message_ul .message_li .header .user_pic {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}
.message_ul .message_li .header .user_pic img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
.message_ul .message_li .header .info span {
  display: block;
}
.message_ul .message_li .header .info .name {
  font-size: 28rpx;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 10rpx;
}
.message_ul .message_li .header .info .time {
  font-size: 28rpx;
  color: rgba(153, 153, 153, 1);
}
.message_ul .message_li .content {
  font-size: 28rpx;
  font-weight: 400;
  line-height: 42rpx;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 20rpx;
}
.message_ul .message_li .footer {
  position: relative;
  padding-top: 17rpx;
  padding-bottom: 12rpx;
}
.message_ul .message_li .footer span {
  text-align: center;
  font-size: 24rpx;
  color: rgba(102, 102, 102, 1);
}
.message_ul .message_li .footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0rpx;
  width: 100%;
  height: 2rpx;
  background: RGBA(153, 153, 153, 0.2);
}
.message_ul .message_li .footer .icons i {
  display: inline-block;
  margin-right: 12rpx;
  position: relative;
  top: 2rpx;
}
.message_ul .message_li .footer .icons.xj i {
  width: 24rpx;
  height: 32rpx;
  background: url(http://mytimg.178mr.com/xj@3x.png) no-repeat;
  background-size: 100%;
}
.message_ul .message_li .footer .icons.kh i {
  width: 38rpx;
  height: 32rpx;
  background: url(http://mytimg.178mr.com/kh@3x.png) no-repeat;
  background-size: 100%;
}
.message_ul .message_li .footer .icons.dz i {
  width: 30rpx;
  height: 26rpx;
  background: url(http://mytimg.178mr.com/dz@3x.png) no-repeat;
  background-size: 100%;
}
</style>

